import { Flex, Popover, Switch, Table } from "antd"
import { useSelector } from "react-redux"

import { StatusTag } from "@/components/common"
import { useApi, useDataMapping, usePermission } from "@/hooks"
import { useLocale } from "@/locales"
import { AppState } from "@/stores"

const useColumns = () => {
	const { newFormat } = useLocale()
	const { locale } = useSelector((state: AppState) => state.global)
	const { generalHttp, loading } = useApi()
	const { getFromDic } = useDataMapping()
	const changeSourceType = async (text: number, record: any, getData: () => void) => {
		const body = { sourceType: text === 0 ? 1 : 0, venueId: record.venueId }
		const [err, _data] = await generalHttp("/venue/editSourceType", body)
		if (!err) getData()
	}
	const venueOptions = [
		{
			value: 0,
			label: newFormat("label.forbidden1")
		},
		{
			value: 1,
			label: newFormat("label.available1")
		},
		{
			value: 2,
			label: newFormat("label.inModify")
		}
	]
	const statusArr = ["error", "success", "warning"]
	const canSwitchMode = usePermission("90750058")

	const walletNames = {
		dataIndex: "walletNames",
		title: newFormat("label.walletName"),
		align: "center",
		width: 120,
		render: (text: string) => {
			const objLocale = JSON.parse(text)
			const l = locale.split("_")[0] + "Name"
			return objLocale[l]
		}
	}
	const venueStatus = {
		dataIndex: "status",
		title: newFormat("label.venueStatus"),
		align: "center",
		width: 120,
		render: (text: number) => {
			return <StatusTag type={statusArr[Number(text)]} content={venueOptions.find(item => item.value === text)?.label} />
		}
	}
	const modeSwitch = (getData: () => void) => {
		return {
			dataIndex: "sourceType",
			title: newFormat("label.modeSwitch"),
			align: "center",
			width: 120,
			render: (text: number, record: any) => {
				// 暂时未启用，等产品将来定义
				return (
					<Flex gap={5} justify="center">
						<div>{newFormat("label.original")}</div>
						<Switch
							checked={text === 1}
							onChange={() => changeSourceType(text, record, getData)}
							disabled={record.status === 1 || !canSwitchMode}
							loading={loading}
						/>
						<div>{newFormat("label.H5")}</div>
					</Flex>
				)
			}
		}
	}
	const gameAmountTotal = {
		dataIndex: "gameAmountTotal",
		title: newFormat("label.gameAmountTotal"),
		align: "center",
		width: 120
	}
	const statusUpdatedAt = {
		dataIndex: "statusUpdatedAt",
		title: newFormat("label.updatedAt"),
		align: "center",
		width: 200
	}
	const changeStatusRemark = {
		dataIndex: "changeStatusRemark",
		title: newFormat("label.remarks"),
		align: "center",
		width: 200
	}
	const language = {
		dataIndex: "languageTypesList",
		title: newFormat("label.language"),
		align: "center",
		width: 120,
		render: (list: string[]) => {
			return list.length === 0
				? "-"
				: list.reduce((pre, cur) => {
						const lan = getFromDic("language", false)(cur)
						return pre + (pre === "" ? "" : ", ") + lan
				  }, "")
		}
	}
	const dispatchMerchant = {
		dataIndex: "usedMerchantList",
		title: newFormat("label.dispatchMerchant"),
		align: "center",
		width: 120,
		render: (text: any) => {
			const list = text.map((item: string, i: number) => {
				return { index: i + 1, name: item }
			})
			return text.length === 0 ? (
				"-"
			) : (
				<Popover
					content={
						<Table
							dataSource={list}
							columns={[
								{
									dataIndex: "index",
									title: newFormat("label.member.serial_no"),
									align: "center"
								},
								{
									dataIndex: "name",
									title: newFormat("label.merchantName"),
									align: "center"
								}
							]}
							pagination={false}
						/>
					}
				>
					<div style={{ color: "blue" }}>{text.length}</div>
				</Popover>
			)
		}
	}
	const remarkDescription = {
		dataIndex: "remark",
		title: newFormat("label.remarkDescription"),
		align: "center",
		width: 200,
		render: (text: any) => text || "-"
	}
	const venueId = {
		dataIndex: "venueId",
		title: newFormat("label.venueId"),
		align: "center",
		width: 80,
		render: (text: any) => text || "-"
	}
	const venueCode = {
		dataIndex: "venueCode",
		title: newFormat("label.venueCode"),
		align: "center",
		width: 80,
		render: (text: any) => text || "-"
	}
	const venueType = {
		dataIndex: "venueType",
		title: newFormat("label.venueType"),
		align: "center",
		width: 80,
		render: (text: any) => text || "-"
	}
	const whitelistIp = {
		dataIndex: "ips",
		title: newFormat("label.whitelistIp"),
		align: "center",
		width: 120,
		render: (text: string) => {
			return (
				<Flex vertical align="center">
					{text.split(",").map(item => {
						return <div key={item}>{item}</div>
					})}
				</Flex>
			)
		}
	}
	const whitelistUrl = {
		dataIndex: "url",
		title: newFormat("label.urlAddress"),
		align: "center",
		width: 200,
		render: (text: string) => {
			return (
				<Flex vertical align="center">
					{text.split(",").map(item => {
						return <div key={item}>{item}</div>
					})}
				</Flex>
			)
		}
	}
	const gameSort = {
		dataIndex: "index",
		title: newFormat("label.gameSort"),
		align: "center",
		width: 80,
		render: (_text: any, _record: any, index: number) => index + 1
	}
	const gameId = {
		dataIndex: "gameId",
		title: newFormat("label.gameId"),
		align: "center",
		width: 120
	}
	const gameName = {
		dataIndex: "gameName",
		title: newFormat("label.gameName"),
		align: "center",
		width: 120
	}
	const venueCodeName = {
		dataIndex: "venueCodeName",
		title: newFormat("label.venueName"),
		align: "center",
		width: 120
	}
	const terminalStatus = {
		dataIndex: "status",
		title: newFormat("label.terminalStatus"),
		align: "center",
		width: 120,
		render: (text: number) => {
			return <StatusTag type={statusArr[Number(text)]} content={venueOptions.find(item => item.value === text)?.label} />
		}
	}
	const jackpot = {
		dataIndex: "jackpot",
		title: newFormat("label.jackpot"),
		align: "center",
		width: 120,
		render: (n: 0 | 1) => newFormat(n > 0 ? "label.have" : "label.havent")
	}
	const currencySupport = {
		dataIndex: "currency",
		title: newFormat("label.currencySupport"),
		align: "center",
		width: 80
	}
	const iconStatus = {
		dataIndex: "iconStatus",
		title: newFormat("label.iconStatus"),
		align: "center",
		width: 120,
		render: (n: number) => ["", newFormat("label.recommend"), newFormat("label.hot"), newFormat("label.mostNew")][n]
	}
	const gameDesc = {
		dataIndex: "description",
		title: newFormat("label.gameDesc"),
		align: "center",
		width: 160
	}
	// const venueIcon = {
	// 	dataIndex: "venueIcon",
	// 	title: newFormat("label.venueIcon"),
	// 	align: "center",
	// 	width: 120,
	// 	render: () => {
	// 		return "-"
	// 	}
	// }
	return {
		walletNames,
		modeSwitch,
		venueStatus,
		changeStatusRemark,
		statusUpdatedAt,
		gameAmountTotal,
		language,
		dispatchMerchant,
		remarkDescription,
		venueCode,
		venueId,
		venueType,
		whitelistIp,
		whitelistUrl,
		gameId,
		gameSort,
		gameName,
		venueCodeName,
		terminalStatus,
		jackpot,
		currencySupport,
		iconStatus,
		gameDesc
	}
}

export default useColumns
